@link-assistant/web-capture 1.7.23 → 1.7.25

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @link-assistant/web-capture
 
+## 1.7.25
+
+### Patch Changes
+
+- 024cb45: Fix `extractAndSaveImages` / `extractBase64ToBuffers` silently dropping base64 images when the markdown image is followed by a title attribute (e.g. `![](data:image/png;base64,... "")`). The base64 payload regex used `[^)]+`, which greedily included the trailing ` ""` and made `Buffer.from()` produce a decoded buffer that no longer matched the original image. The pattern now restricts the payload to base64 alphabet characters and matches the optional trailing markdown title separately so the title cannot leak into the payload.
+
+## 1.7.24
+
+### Patch Changes
+
+- 52ccb91: Fix structurally broken bold markup in `--capture api` output. Adjacent `<span style="font-weight:700">` siblings that the Google Docs export emits for headings, list items, and notes used to be wrapped in independent `<strong>...</strong>` pairs, producing split runs (`**13.1** **First subsection**`), stray `****` between adjacent bold blocks, and bold ranges that leaked across `<br>`/`<img>` boundaries (`**Caption A:![](images/x.png)Caption B:**`). The Google Docs preprocessor now closes `<strong>` runs at `<br>`/`<img>` boundaries, splits the wrapping `<p>` into separate paragraphs at those boundaries, drops empty `<strong></strong>` pairs, and coalesces adjacent bold siblings into a single run. Renderers can now interpret the output as valid CommonMark again.
+
 ## 1.7.23
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@link-assistant/web-capture",
-  "version": "1.7.23",
+  "version": "1.7.25",
   "description": "CLI and microservice to render web pages as HTML, Markdown, or PNG",
   "main": "src/index.js",
   "bin": {

package/src/extract-images.js

@@ -2,8 +2,11 @@ import { createHash } from 'crypto';
 import fs from 'fs';
 import path from 'path';
 
+// Capture groups: alt text, mime subtype, base64 payload. A trailing
+// markdown title attribute (e.g. `![](src "")`) is matched but discarded so
+// the empty title cannot leak into the base64 payload.
 const BASE64_IMAGE_REGEX =
-  /!\[([^\]]*)\]\(data:image\/(png|jpeg|jpg|gif|webp|svg\+xml);base64,([^)]+)\)/gi;
+  /!\[([^\]]*)\]\(data:image\/(png|jpeg|jpg|gif|webp|svg\+xml);base64,([A-Za-z0-9+/=]+)(?:\s+"[^"]*")?\)/gi;
 
 /**
  * @param {string} markdown - Markdown content with data URI images

package/src/gdocs-preprocess.js

@@ -62,6 +62,11 @@ export function preprocessGoogleDocsExportHtml(html) {
     hoisted += 1;
   });
 
+  splitStrongAtBlockBoundaries($);
+  splitParagraphsAtBoldBoundaries($);
+  removeEmptyStrong($);
+  coalesceAdjacentStrong($);
+
   groupGoogleDocsBlockquotes($, classStyles);
   nestGoogleDocsLists($, classStyles);
   normalizeGoogleDocsTables($);
@@ -144,6 +149,172 @@ export function normalizeGoogleDocsExportMarkdown(markdown) {
     .replace(/\n{3,}/g, '\n\n');
 }
 
+// Issue #120: a `<strong>` whose closing tag would land in a different block
+// boundary leaks bolding across paragraphs and images. Split such a strong
+// into multiple bold runs that each stop at the boundary.
+function splitStrongAtBlockBoundaries($) {
+  let changed = true;
+  while (changed) {
+    changed = false;
+    const offenders = $('strong').filter(function () {
+      return $(this).find('br, img, p, div, li').length > 0;
+    });
+    if (!offenders.length) {
+      break;
+    }
+    offenders.each(function () {
+      const $strong = $(this);
+      const segments = [];
+      let current = [];
+      const flush = () => {
+        if (current.length) {
+          segments.push({ type: 'inline', nodes: current });
+          current = [];
+        }
+      };
+      $strong.contents().each(function () {
+        if (this.type === 'tag' && this.tagName === 'br') {
+          flush();
+          segments.push({ type: 'br' });
+        } else if (this.type === 'tag' && this.tagName === 'img') {
+          flush();
+          segments.push({ type: 'img', node: this });
+        } else if (
+          this.type === 'tag' &&
+          ['p', 'div', 'li'].includes(this.tagName)
+        ) {
+          flush();
+          segments.push({ type: 'block', node: this });
+        } else {
+          current.push(this);
+        }
+      });
+      flush();
+
+      const pieces = segments.map((segment) => {
+        if (segment.type === 'br') {
+          return '<br>';
+        }
+        if (segment.type === 'img') {
+          return $.html(segment.node);
+        }
+        if (segment.type === 'block') {
+          const inner = $(segment.node).html() || '';
+          const tag = segment.node.tagName;
+          const innerWrapped = inner.trim() ? `<strong>${inner}</strong>` : '';
+          return `<${tag}>${innerWrapped}</${tag}>`;
+        }
+        const inner = segment.nodes.map((node) => $.html(node)).join('');
+        if (!inner.trim()) {
+          return inner;
+        }
+        return `<strong>${inner}</strong>`;
+      });
+      $strong.replaceWith(pieces.join(''));
+      changed = true;
+    });
+  }
+}
+
+// Issue #120: when a `<p>` contains a `<br>` adjacent to a `<strong>` or an
+// `<img>`, split it into multiple paragraphs so each bold run and image
+// becomes its own block. Without this, the markdown converter renders
+// `**Caption**  \n![](x)` (inline) instead of separate blocks.
+function splitParagraphsAtBoldBoundaries($) {
+  $('p').each(function () {
+    const $p = $(this);
+    const contents = $p.contents().toArray();
+    if (!contents.some((n) => n.type === 'tag' && n.tagName === 'br')) {
+      return;
+    }
+    const hasStrongOrImg = contents.some(
+      (n) => n.type === 'tag' && (n.tagName === 'strong' || n.tagName === 'img')
+    );
+    if (!hasStrongOrImg) {
+      return;
+    }
+    const segments = [];
+    let current = [];
+    const flush = () => {
+      const html = current
+        .map((node) => $.html(node))
+        .join('')
+        .trim();
+      if (html) {
+        segments.push(html);
+      }
+      current = [];
+    };
+    for (const node of contents) {
+      if (node.type === 'tag' && node.tagName === 'br') {
+        flush();
+      } else if (node.type === 'tag' && node.tagName === 'img') {
+        flush();
+        segments.push($.html(node));
+      } else {
+        current.push(node);
+      }
+    }
+    flush();
+    if (segments.length <= 1) {
+      return;
+    }
+    const replacement = segments.map((html) => `<p>${html}</p>`).join('');
+    $p.replaceWith(replacement);
+  });
+}
+
+// Issue #120: drop empty `<strong></strong>` so they cannot pair with a
+// neighbour and emit `****`.
+function removeEmptyStrong($) {
+  $('strong').each(function () {
+    const $strong = $(this);
+    if (!$strong.html() || !$strong.text().trim()) {
+      if (!$strong.find('img').length) {
+        $strong.remove();
+      }
+    }
+  });
+}
+
+// Issue #120: merge adjacent `<strong>` siblings (optionally separated by
+// whitespace text nodes) into a single `<strong>` so the converter emits
+// `**a b**` instead of `**a** **b**`.
+function coalesceAdjacentStrong($) {
+  let changed = true;
+  while (changed) {
+    changed = false;
+    $('strong').each(function () {
+      const $strong = $(this);
+      if (!$strong.parent().length) {
+        return;
+      }
+      let sibling = this.next;
+      const between = [];
+      while (sibling) {
+        if (sibling.type === 'text' && /^\s*$/.test(sibling.data || '')) {
+          between.push(sibling);
+          sibling = sibling.next;
+          continue;
+        }
+        if (sibling.type === 'tag' && sibling.tagName === 'strong') {
+          const innerSelf = $strong.html() || '';
+          const innerNext = $(sibling).html() || '';
+          const joiner = between.map((node) => node.data || '').join('');
+          $strong.html(`${innerSelf}${joiner}${innerNext}`);
+          for (const node of between) {
+            $(node).remove();
+          }
+          $(sibling).remove();
+          changed = true;
+          return;
+        }
+        break;
+      }
+    });
+  }
+}
+
 function parseCssClassStyles($) {
   const classStyles = new Map();
   $('style').each(function () {

package/tests/fixtures/bold-coalesce-and-leakage.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+  <body>
+    <!-- Symptom A: two adjacent bold spans -->
+    <p>
+      <span style="font-weight: 700">13.1 </span
+      ><span style="font-weight: 700">First subsection</span>
+    </p>
+
+    <!-- Symptom B: outer bold ends, inner bold begins, no separator -->
+    <ol>
+      <li><span style="font-weight: 700">Item header.</span></li>
+    </ol>
+    <p><span style="font-weight: 700">Note:</span> body text.</p>
+
+    <!-- Symptom C: bold range spans across <br> and <img> -->
+    <p>
+      <span style="font-weight: 700"
+        >Caption A:<img
+          alt=""
+          src="data:image/png;base64,iVBORw0KGgo=" /><br />Caption B:<img
+          alt=""
+          src="data:image/png;base64,iVBORw0KGgo="
+      /></span>
+    </p>
+  </body>
+</html>

package/tests/unit/bold-coalesce-and-leakage.test.js

@@ -0,0 +1,54 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import {
+  normalizeGoogleDocsExportMarkdown,
+  preprocessGoogleDocsExportHtml,
+} from '../../src/gdocs.js';
+import { convertHtmlToMarkdown } from '../../src/lib.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const HTML = fs.readFileSync(
+  path.join(__dirname, '..', 'fixtures', 'bold-coalesce-and-leakage.html'),
+  'utf8'
+);
+
+describe('bold-run coalescing and block boundary handling (issue #120)', () => {
+  let md;
+  beforeAll(() => {
+    const preprocessed = preprocessGoogleDocsExportHtml(HTML);
+    md = normalizeGoogleDocsExportMarkdown(
+      convertHtmlToMarkdown(preprocessed.html)
+    );
+  });
+
+  it('A: coalesces adjacent bold spans into a single bold run', () => {
+    expect(md).toMatch(/\*\*13\.1 First subsection\*\*/);
+    expect(md).not.toMatch(/\*\*13\.1\*\*\s+\*\*First subsection\*\*/);
+  });
+
+  it('B: never emits an empty "****" pair between adjacent bold runs', () => {
+    expect(md).not.toMatch(/\*{4}/);
+  });
+
+  it('C: closes bold at block-level boundaries (<br>, <img>)', () => {
+    // No single bold run may contain an image. CommonMark bold cannot span
+    // a blank line (`\n\n`), so the inner content is restricted accordingly.
+    const strongRe = /\*\*((?:(?!\*\*|\n\n)[\s\S])+?)\*\*/g;
+    const imageRe = /!\[[^\]]*\]\([^)]+\)/;
+    for (const match of md.matchAll(strongRe)) {
+      expect(imageRe.test(match[1])).toBe(false);
+    }
+    expect(md).toMatch(/\*\*Caption A:\*\*/);
+    expect(md).toMatch(/\*\*Caption B:\*\*/);
+  });
+
+  it('D: every "**" opener has a matching closer (balanced asterisks)', () => {
+    const stripped = md
+      .replace(/`[^`]*`/g, '')
+      .replace(/!\[[^\]]*\]\([^)]*\)/g, '');
+    const count = (stripped.match(/\*\*/g) || []).length;
+    expect(count % 2).toBe(0);
+  });
+});

package/tests/unit/extract-images.test.js

@@ -130,6 +130,26 @@ describe('extract-images module', () => {
       );
     });
 
+    it('extracts a base64 image even when followed by an empty markdown title', () => {
+      // Google Docs HTML exports embed `<img title="" alt="" src="...">`, and
+      // the html2md pipeline can render that as `![](src "")`. The base64
+      // extractor must still pull the image out cleanly so the rendered
+      // markdown does not carry multi-megabyte data URIs.
+      const md = `Hello.\n\n![](data:image/png;base64,${TINY_PNG} "")\n\nEnd.\n`;
+      const result = extractAndSaveImages(md, tmpDir);
+      expect(result.extracted).toBe(1);
+      expect(result.markdown).toMatch(/images\/image-[a-f0-9]+\.png/);
+      expect(result.markdown).not.toContain('data:image');
+    });
+
+    it('extracts a base64 image with a non-empty markdown title', () => {
+      const md = `Hello.\n\n![alt](data:image/png;base64,${TINY_PNG} "caption")\n\nEnd.\n`;
+      const result = extractAndSaveImages(md, tmpDir);
+      expect(result.extracted).toBe(1);
+      expect(result.markdown).toMatch(/images\/image-[a-f0-9]+\.png/);
+      expect(result.markdown).not.toContain('data:image');
+    });
+
     it('handles SVG data URIs', () => {
       const svgContent =
         '<svg xmlns="http://www.w3.org/2000/svg" width="1" height="1"><rect fill="red" width="1" height="1"/></svg>';